﻿{include file="public/header"}
<title>问题修改</title>
</head>
<body>

<style>
    .form-label{
        width: 15% !important;
    }
</style>
<article class="page-container">
    <form action="" method="post" class="form form-horizontal" >
        <div class="ch-row ch-info-form">
            <p class="flex1">名称：</p>
            <div class="flex5 ch-row ch-info-form-price">
                <input type="text"  name="role_name"  value="{$role_name}" class="role_name">
            </div>
        </div>
        <input type="hidden"  name="id"  value="{$id}" class="role_id">
        <div class="ch-row ch-info-form cdcd">
            <p class="flex1">权限：</p>
            <div class="flex5 ch-row ">
                <ul id="treeDemo" class="ztree"></ul>
            </div>
        </div>


        <div class="ch-row ch-info-form">
            <button class="btn btn-primary radius" type="button"><i
                    class="Hui-iconfont">&#xe632;</i> 提交
            </button>
        </div>
    </form>
</article>

{include file="public/footer"}
<script type="text/javascript" src="{$Think.DOMAIN_SRC}/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<script>
    $(function () {
        var settingss = {
            data: {
                simpleData: {
                    enable: true,  //true 、 false 分别表示 使用 、 不使用 简单数据模式
                    idKey: "id",   //节点数据中保存唯一标识的属性名称
                    pIdKey: "pId",    //节点数据中保存其父节点唯一标识的属性名称
                    rootPId: 0  //用于修正根节点父节点数据，即 pIdKey 指定的属性值
                },
                key: {
                    name: "node_name"  //zTree 节点数据保存节点名称的属性名称  默认值："name"
                }
            },

            view: {
                dblClickExpand: true,//双击节点时，是否自动展开父节点的标识
                showLine: true,//是否显示节点之间的连线
                fontCss: {'color': 'black', 'font-weight': 'bold'},//字体样式函数
                selectedMulti: true //设置是否允许同时选中多个节点
            },
            check: {
                chkboxType: {"Y": "ps", "N": "ps"},
                // chkboxType: { "Y": "", "N": "" },
                chkStyle: "checkbox",//复选框类型
                enable: true //每个节点上是否显示 CheckBox
            },
            callback: {

                onClick: function (e, treeId, treeNode, clickFlag) {     //用于捕捉勾选时触发

                    zTree.checkNode(treeNode, !treeNode.checked, true);//勾选或取消勾选单个节点

                }

            }

        };
        $(document).ready(function () {
            $.ajax({
                type: "get",
                url: "{:Url('index/role/role_edi')}",
                async: true,
                data: {id:'{$id}'},
                success: function (res) {
                    var dat=JSON.parse(res);
                    console.log(dat);
                    $.fn.zTree.init($("#treeDemo"), settingss, dat);
                    var treeObj=$.fn.zTree.getZTreeObj("treeDemo");
                    for(var i = 0; i < dat.length; i++) {
                        var node = treeObj.getNodeByParam("id", dat[i].checked);
                        if(node != 0) {
                            treeObj.checkNode(node, true);
                        }
                    }
                }
            });
        });
    })
    $('.radius').click(function () {
        var treeObj=$.fn.zTree.getZTreeObj("treeDemo");
        var nodes =  treeObj.getCheckedNodes(true);   //获取被勾选/未勾选的节点集合
        var v="";
        for(var i=0;i<nodes.length;i++){
            v+=nodes[i].id + ",";

        }
        var role_name=$('.role_name').val();
        var role_id=$('.role_id').val();
        var src="{:Url('index/role/edi')}";
            $.ajax({
                type: 'POST',
                url: src,
                dataType: 'json',
                data: {rule:v,role_name:role_name,id:role_id},
                success: function (data) {
                    var res=JSON.parse(data);
                    if(res.code==200){
                        parent.location.reload();

                    }else{
                        layer.msg(res.msg,{icon: 5,time:1000});
                    }

                },
                error: function (data) {
                    console.log(data.msg);
                },
            });
    });



</script>
</body>
</html>